var arr = [{
	id: 1,
	name: 'kky1',
	age: 15,
	sex: '男',
	hobby: '学习'
}, {
	id: 2,
	name: 'kky2',
	age: 16,
	sex: '男',
	hobby: '学习'
}, {
	id: 3,
	name: 'kky3',
	age: 17,
	sex: '男',
	hobby: '学习'
}, {
	id: 4,
	name: 'kky4',
	age: 18,
	sex: '男',
	hobby: '学习'
}, {
	id: 5,
	name: 'kky5',
	age: 19,
	sex: '男',
	hobby: '学习'
}]


window.onload = function() {
	if (localStorage.arr) {
		var arr = JSON.parse(arr);
		render(arr);
	} else {
		var arr = [];
	}
}

var tbody = document.querySelector('tbody');
render(arr);

function render(arr) {
	var str = '';
	for (var i = 0; i < arr.length; i++) {
		str +=
			`
				<tr>
				    <td>${i + 1}</td>
					<td>${arr[i].name}</td>
					<td>${arr[i].age}</td>
					<td>${arr[i].sex}</td>
					<td>${arr[i].hobby}</td>
					<td>
						<button type="button" onclick=up(${i})>上移</button>
						<button type="button" onclick=del(${arr[i].id})>删除</button>
						<button type="button" onclick=down(${i})>下移</button>
					</td>
				</tr> 
			`;
	}
	tbody.innerHTML = str;
	disabled ();
}

//删除
function del (id) {
	for(i = 0;i < arr.length;i++) {
		if (id === arr[i].id) {
			arr.splice(i,1);
		}
	}
	render(arr);
	localStorage.arr = JSON.stringify(arr);
}

//上移
function up (i) {
	if (i !== 0) {
		var key = arr[i];
		arr[i] = arr[i - 1];
		arr[i - 1] = key;
	}
	render(arr);
}

//下移
function down (i) {
	if (i < arr.length - 1) {
		var key = arr[i];
		arr[i] = arr[i + 1];
		arr[i + 1] = key;
	}
	render(arr);
}

//禁用
function disabled () {
	var trs = document.querySelectorAll('tbody tr');
	if(trs.length > 1) {
		tbody.firstElementChild.lastElementChild.firstElementChild.disabled = true;
		tbody.lastElementChild.lastElementChild.lastElementChild.disabled = true;
	}
}